<!-- 展示关于版本号 -->
<template>
  <div class="personpages">
  <el-input placeholder="请输入内容" v-model="keyword" class="input-with-select" clearable>
   <el-select v-model="type" slot="prepend" placeholder="请选择">
      <el-option label="处置报告" value='1'></el-option>
	  <el-option label="月度报告" value='0'></el-option>
    </el-select>
  </el-input>
  
  <div class="reportBox">
	  <template v-if="reports.length">
		  <div class="reportItem" v-for="item in reports" 
		  :key='item.reportid'
		  @click="download(item)">
			  <div>{{item.reportname}}</div>
			  <div>报告日期：{{item.createtime}}</div>
			  <!-- <a v-if="item.fileid" :href="'http://foshansafety.top:28097/gas/attachment/download/'+item.fileid" > -->
				  <span>预览</span>
			  <!-- </a> -->
		  </div>
	  </template>
	  <div class="nodata" v-else>暂无数据</div>
  </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let _this = this;
  	process.env.NODE_ENV == "development" ? this.url = 'http://foshansafety.top:28097/gas/attachment/download/': this.url = 'https://wb.fs-omc.com/fsgas/gas/attachment/download/'
  },
  watch:{
	  type:{
		  handler(){
			  this.getReport()
		  },
		  immediate:true
	  },
	  keyword(val){
		  if(!val){
			  this.getReport()
		  }
		  this.reports = this.reports.filter(item => item.reportname.includes(val))
	  }
  },
  data() {
    return {
		url:'',
		keyword:'',
		type: '1',
		reports:[
		],
	};
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
	download(report){
		// if(this.type == 1){
			this.$router.push({
			name:'pdfView',
			params:{
				fileid:report.fileid
			}
		})
		// }else{
		// 	console.log('是月度报告')
		// 	window.open(this.url + report.fileid +'.mvc', '_blank');

		// }

		// var fileExtension = report.filepath.substring(report.filepath.lastIndexOf('.') + 1);
		// if(fileExtension == 'pdf'){
		// 	console.log('pdf文件')
		// 	window.open('http://foshansafety.top:28097/gas/attachment/download/'+report.fileid+'.mvc', '_blank');
			
		// }else{
		// 	window.open('http://foshansafety.top:28097/gas/attachment/download/'+report.fileid+'.mvc', '_blank');
		// }
	},
	getReport(){
		var param = {
			type:this.type
		};
		this.$api.reqApi.report(param).then(res => {
		  if (res.code === "success") {
			this.reports = res.data;
		  }
		});
	},
  }
};
</script>
<style lang="stylus" scoped>
  .personpages {
  background: #F5F6FA;
  height: 100%;
}
.reportBox{
	height: calc(100% - 110px);
	padding-top:10px;
	overflow-y:auto;
	.reportItem{
		box-shadow: 0 0 3px 3px #ecebeb;
		padding: 10px 20px 5px;
		position:relative;
		margin:0 15px 20px;	
		border-radius:5px;
		div{
			width:85%;
			margin-bottom 10px;
			&:nth-child(1){
				font-size:15px;
			}
			&:nth-child(2){
				color:#666;
			}
		}
		span{
			padding:5px 10px;
			border-radius:5px;
			position:absolute;
			right:10px;
			top:50%;
			transform:translateY(-50%);
			background:#428EE4;
			color:#fff;
			font-size:14px;
		}
			
	}
}
::v-deep{
  .el-select .el-input {
	width: 2.2rem;
  }
  .input-with-select .el-input-group__prepend {
	background-color: #fff;
  }
  
}
.nodata{
	text-align:center;
	height:50px;
	line-height:50px;
	color:#666;
}
</style>
